<template>
    <div>
        <div class="top-panel">
            <div class="container-fluid  top-grid">
                <div class="container-fluid-row">
                    <div class="row-fluid">
                        <slot name="top">
                        </slot>
                    </div>
                </div>
            </div>
        </div>
        <div class="logo-section">
            <div class="container-fluid  top-grid">
                <div class="container-fluid-row">
                    <div class="logo-content">
                        <slot name="logo">
                        </slot>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav" v-show="fixed">

        </div>
        <div class="nav" :class="{fixed:fixed,show:visible}">
            <div class="container-fluid">
                <div class="container-fluid-row">
                    <div class="nav-container">
                        <slot name="nav"></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import {get} from '../utils/request'

    export default {
        name: "ep-header",
        created() {
            window.addEventListener('scroll', this.windowScroll)
        },
        props:{
            logoutUrl:{
                type:String,
                default:""
            }
        },
        methods: {
            windowScroll() {

                this.scroll = document.documentElement.scrollTop | document.body.scrollTop;

                if (this.scroll >= 210) {
                    this.fixed = true
                    setTimeout(() => {
                        this.visible = true
                    }, 100)
                } else {
                    this.fixed = false
                    this.visible = false
                }
            },
            logout() {
                let url = window.ctx + this.logoutUrl
                get(url, {}).then((res) => {
                    if (res.result == 1) {
                        this.$message.success(res.message)
                        window.location.href = window.ctx + "/index.html";
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        },
        data() {
            return {
                scroll: 0,
                fixed: false,
                visible: false,
            }
        }
    }
</script>

<style scoped>

</style>
